import React from 'react';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import QueueAnim from 'rc-queue-anim';
import { Row, Col, Button } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import { LogButton, getChildrenToRender } from './utils';
import { BrowerFireFoxData } from './soft.data';

function FireFox(props) {
  const { ...tagProps } = props;
  const { dataSource, isMobile } = tagProps;
  delete tagProps.dataSource;
  delete tagProps.isMobile;
  const animType = {
    queue: isMobile ? 'bottom' : 'right',
    queue2: 'left',
    one: isMobile
      ? {
        scaleY: '+=0.3',
        opacity: 1,
        type: 'from',
        ease: 'easeOutQuad',
      }
      : {
        x: '-=300',
        opacity: 1,
        type: 'from',
        ease: 'easeOutQuad',
      },
  };
  return (
    <div {...tagProps} {...dataSource.wrapper}>
      <OverPack component={Row} {...dataSource.OverPack}>
        <QueueAnim
          type={animType.queue2}
          leaveReverse
          animConfig={{ translateX: [0, -300] }}
          ease={['easeOutQuad', 'easeInQuad']}
          {...dataSource.childWrapper}
          component={Col}
          componentProps={{
            md: dataSource.childWrapper.md,
            xs: dataSource.childWrapper.xs,
          }}
        >
          <div key="img2" {...dataSource.img}>
            <img src={dataSource.img.children} width="100%" alt="img" />
          </div>
        </QueueAnim>
        <QueueAnim
          key="text"
          type={animType.queue}
          leaveReverse
          animConfig={{ translateX: [0, 300] }}
          ease={['easeOutQuad', 'easeInQuad']}
          {...dataSource.childWrapper}
          component={Col}
          componentProps={{
            md: dataSource.childWrapper.md,
            xs: dataSource.childWrapper.xs,
          }}
        >
          <div key='content'>
            {dataSource.childWrapper.children.map(getChildrenToRender)}
            <div
              className='firefox_button'
            >
              <LogButton
                type="primary"
                shape="round"
                softName={BrowerFireFoxData.softName64}
                className="log_button"
              >
                下载64位
              </LogButton>

              <LogButton
                type="primary"
                shape="round"
                softName={BrowerFireFoxData.softName32}
                className="log_button"
              >
                下载32位
              </LogButton>

              <LogButton
                type="primary"
                shape="round"
                softName={BrowerFireFoxData.softLinuxName64}
                className="log_button"
              >
                下载Linux版本
              </LogButton>
            </div>

          </div>
        </QueueAnim>
      </OverPack>
    </div>
  );
}

export default FireFox;
